import React, { Component } from 'react'
import { Card, Table, Button, Icon, message, Modal } from 'antd'

import { LinkButton } from '../../components/link-button'
import { reqCategorys, reqUpdateCategory, reqAddCategory } from '../../api'
import AddForm from './add-form'
import UpdateForm from './update-form'
import { getReqData, clearTwoSpace } from '../../utils'
import { PAGE_SIZE } from '../../config'

/*
商品分类路由
 */
export default class Category extends Component {
  state = {
    loading: false, // 是否正在获取数据中
    categorys: [], // 一级分类列表
    subCategorys: [], // 二级分类列表
    parentId: '0', // 当前需要显示的分类列表的父分类ID
    parentName: '', // 当前需要显示的分类列表的父分类名称
    showStatus: 0, // 标识添加/更新的确认框是否显示, 0: 都不显示, 1: 显示添加, 2: 显示更新
  }

  /*
  初始化Table所有列的数组
   */
  initColumns = () => {
    this.columns = [
      {
        title: '分类的名称',
        dataIndex: 'name', // 显示数据对应的属性名
      },
      {
        title: '操作',
        width: 300,
        render: (
          category // 返回需要显示的界面标签
        ) => (
          <span>
            <LinkButton onClick={() => this.showUpdate(category)}>
              修改分类
            </LinkButton>
            {/*如何向事件回调函数传递参数: 先定义一个匿名函数, 在函数调用处理的函数并传入数据*/}
            {this.state.parentId * 1 === 0 ? (
              <LinkButton onClick={() => this.showSubCategorys(category)}>
                查看子分类
              </LinkButton>
            ) : null}
          </span>
        ),
      },
    ]
  }

  /*
  异步获取一级/二级分类列表显示
  parentId: 如果没有指定根据状态中的parentId请求, 如果指定了根据指定的请求
   */
  getCategorys = async (parentId) => {
    // 在发请求前, 显示loading
    this.setState({ loading: true })
    // 这里转为数字
    parentId = parentId || this.state.parentId
    // const tempId = parentId === "0" ? 0 : parentId;
    // 发异步ajax请求, 获取数据
    let { result } = await reqCategorys(parentId)
    // console.log('后台返回的result', result)
    // 在请求完成后, 隐藏loading
    this.setState({ loading: false })

    const data = getReqData(result)
    // console.log('解析后的 data', data);
    if (data) {
      // 更新一级/二级分类状态
      this.setState(
        '0' === parentId ? { categorys: data } : { subCategorys: data }
      )
    } else {
      message.error('获取分类列表失败')
    }
  }

  /*
  显示指定一级分类对象的二子列表
   */
  showSubCategorys = (category) => {
    // 更新状态
    this.setState(
      {
        parentId: category._id,
        parentName: category.name,
      },
      () => {
        // 在状态更新且重新render()后执行
        // console.log('parentId', this.state.parentId) // '0'
        // 获取二级分类列表显示
        this.getCategorys()
      }
    )

    // setState()不能立即获取最新的状态: 因为setState()是异步更新状态的
    // console.log('parentId', this.state.parentId) // '0'
  }

  /*
  显示指定一级分类列表
   */
  showCategorys = () => {
    // 更新为显示一列表的状态
    this.setState({
      parentId: '0',
      parentName: '',
      subCategorys: [],
    })
  }

  /*
  响应点击取消: 隐藏确定框
   */
  handleCancel = () => {
    // 清除输入数据
    this.form.resetFields()
    // 隐藏确认框
    this.setState({
      showStatus: 0,
    })
  }

  /*
  显示添加的确认框
   */
  showAdd = () => {
    this.setState({
      showStatus: 1,
    })
  }

  /*
  添加分类
   */
  addCategory = () => {
    this.form.validateFields(async (err, values) => {
      if (err) return null
      // 隐藏确认框
      this.setState({ showStatus: 0 })

      // 收集数据, 并提交添加分类的请求
      let { parentId, categoryName } = values
      // 清除输入数据
      this.form.resetFields()
      let result = await reqAddCategory(categoryName, parentId)
      console.log('添加分类 result', result)
      const data = getReqData(result.result)

      if (!data) {
        // 添加分类失败了
        // console.log(result);
        const { msg } = result.result.data
        message.error(msg)
        return null
      }

      // 添加的分类就是当前分类列表下的分类
      if (parentId === this.state.parentId) {
        // 重新获取当前分类列表显示
        this.getCategorys()
      } else if (parentId === '0') {
        // 在二级分类列表下添加一级分类, 重新获取一级分类列表, 但不需要显示一级列表
        this.getCategorys('0')
      }
    })
  }

  /*
  显示修改的确认框
   */
  showUpdate = (category) => {
    // 保存分类对象
    this.category = category
    // 更新状态
    this.setState({
      showStatus: 2,
    })
  }

  /*
  更新分类
   */
  updateCategory = () => {
    // console.log('updateCategory()')
    // 进行表单验证, 只有通过了才处理
    this.form.validateFields(async (err, values) => {
      if (!err) {
        // 1. 隐藏确定框
        this.setState({
          showStatus: 0,
        })

        // 准备数据
        const { _id, name } = this.category
        let { categoryName } = values
        // 清除输入数据
        this.form.resetFields()

        // 1 清除两头的空格，如果相等就别发送了
        if (clearTwoSpace(name) === categoryName) return
        // 2. 发请求更新分类
        const { result } = await reqUpdateCategory(categoryName, _id)
        // 3. 重新显示列表
        const resultData = getReqData(result)
        if (false !== resultData) this.getCategorys()
      }
    })
  }

  /*
  为第一次render()准备数据
   */
  UNSAFE_componentWillMount() {
    this.initColumns()
  }

  /*
  执行异步任务: 发异步ajax请求
   */
  componentDidMount() {
    // 获取一级分类列表显示
    this.getCategorys()
  }

  render() {
    // 读取状态数据
    let {
      categorys,
      subCategorys,
      parentId,
      parentName,
      loading,
      showStatus,
    } = this.state
    // 读取指定的分类
    let category = this.category || {} // 如果还没有指定一个空对象

    // console.log(categorys);
    // console.log(category);

    // card的左侧
    let title =
      parentId === '0' ? (
        '一级分类列表'
      ) : (
        <span>
          <LinkButton onClick={this.showCategorys}>一级分类列表</LinkButton>
          <Icon type="arrow-right" style={{ marginRight: 5 }} />
          <span>{parentName}</span>
        </span>
      )
    // Card的右侧
    let extra = (
      <Button type="primary" onClick={this.showAdd}>
        <Icon type="plus" />
        添加
      </Button>
    )

    return (
      <Card title={title} extra={extra}>
        <Table
          bordered
          rowKey="_id"
          loading={loading}
          dataSource={parentId === '0' ? categorys : subCategorys}
          columns={this.columns}
          pagination={{ defaultPageSize: PAGE_SIZE, showQuickJumper: true }}
        />

        <Modal
          title="添加分类"
          visible={showStatus === 1}
          onOk={this.addCategory}
          onCancel={this.handleCancel}
        >
          <AddForm
            categorys={categorys}
            parentId={parentId}
            setForm={(form) => {
              this.form = form
            }}
          />
        </Modal>

        <Modal
          title="更新分类"
          visible={showStatus === 2}
          onOk={this.updateCategory}
          onCancel={this.handleCancel}
        >
          <UpdateForm
            categoryName={category.name}
            setForm={(form) => {
              this.form = form
            }}
          />
        </Modal>
      </Card>
    )
  }
}
